// createRouter：创建router实例对象
// createWebHistory：创建history模式的路由
import { createRouter, createWebHistory } from "vue-router";
// 这里导入的路径最好写全，不然无法识别
import Login from "@/views/Login/index.vue";
import Layout from "@/views/Layout/index.vue";
import Home from "@/views/Home/index.vue";
import Category from "@/views/Category/index.vue";
import SubCategory from "@/views/SubCategory/index.vue";
import Detail from "@/views/Detail/index.vue";
import CartList from "@/views/CartList/index.vue";

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  // 配置path和component对应关系的位置
  routes: [
    {
      // 根路由出口在  App.vue 的 RouterView
      path: "/",
      component: Layout,
      children: [
        // Layout  的子路由将会被渲染到 Layout  文件中的  RouterView 中去
        {
          // Home是默认进来就打开的二级路由页，因此path置空，那么当路径是空或者是/时就会自动的跳转到Home上
          path: "",
          component: Home,
        },
        {
          path: "category/:id",
          component: Category,
        },
        // 商品分类页
        {
          path: "category/sub/:id",
          component: SubCategory,
        },
        // 商品详情页
        {
          path: "detail/:id",
          component: Detail,
        },
        // 购物车列表
        {
          path: "cartlist",
          component: CartList,
        },
      ],
    },
    // 和App.vue页面同级
    {
      path: "/login",
      component: Login,
    },
  ],
  // 路由滚动行为:路由切换后滚动条归零，也就是回到顶部
  scrollBehavior() {
    return {
      top: 0,
    };
  },
});

export default router;
// 路径配置完之后，一定要有路由出口
